<template>

  <u-form :model="form" ref="form1" class="content">
    <u-form-item label="金额" prop="amount">
      <u-input v-model="form.amount"/>
    </u-form-item>


    <swiper class="swiper" @change="change">
      <swiper-item v-for="(chunk, index) in chunkedItems" :key="index">
        <u-grid :col="5" hover-class="hover-class" :border="false">
          <u-grid-item v-for="(item, itemIndex) in chunk" :key="itemIndex" class="cate-item"
                       @click="click(item.id)" :class="{'selectCategory': item.id !== form.categoryId}">
            <u-icon :name="'/api/file/icon?name=' + item.categoryPic" :size="46"></u-icon>
            <text class="grid-text">{{ item.categoryName }}</text>
          </u-grid-item>
        </u-grid>
      </swiper-item>
    </swiper>
    <u-form-item label="账户" prop="channel">
      <u-input v-model="form.channelName" type="select" @click="channelShow=true"/>
    </u-form-item>
    <u-form-item label="备注" prop="remark">
      <u-input v-model="form.remark" type="textarea"/>
    </u-form-item>


    <!--    <u-form-item label="生日" prop="birthday">-->
    <!--      <u-input v-model="form.birthday" type="select" @click="calendar1.show=true"/>-->
    <!--      <u-calendar v-model="calendar1.show" mode="date" @change="onCalendar1"></u-calendar>-->
    <!--    </u-form-item>-->

    <!--    <u-form-item label="性别" prop="sex">-->
    <!--      <u-input v-model="select1.current.label" type="select" @click="select1.show=true"/>-->
    <!--    </u-form-item>-->
    <!--    <u-form-item label="水果" prop="checkbox">-->
    <!--      <u-checkbox-group v-model="form.checkbox">-->
    <!--        <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.name">-->
    <!--          {{ item.name }}-->
    <!--        </u-checkbox>-->
    <!--      </u-checkbox-group>-->
    <!--    </u-form-item>-->
    <!--    <u-form-item label="味道" prop="radio">-->
    <!--      <u-radio-group v-model="form.radio">-->
    <!--        <u-radio v-for="(item, index) in radioList1" :key="index" :name="item.name" :disabled="item.disabled">-->
    <!--          {{ item.name }}-->
    <!--        </u-radio>-->
    <!--      </u-radio-group>-->
    <!--    </u-form-item>-->
    <!--    <u-form-item label="开关" prop="switchVal">-->
    <!--      <template v-slot:right>-->
    <!--        <u-switch v-model="form.switchVal"></u-switch>-->
    <!--      </template>-->
    <!--    </u-form-item>-->
  </u-form>

  <u-select v-model="channelShow" :list="listChannel" @confirm="onSelectChannel"></u-select>

  <button @click="submit">提交</button>


</template>

<script>
import {
  categoryListApi,
  channelDeleteApi,
  channelListApi,
  outlayAddApi,
  outlayListApi,
  outlaySelectByIdApi, outlayUpdateApi
} from "@/network/api/api";

export default {
  data() {
    return {

      current: 0,
      selectCategory: 1,
      list: [],
      listChannel: [],
      channelShow: false,
      form: {
        name: '',
        // birthday: "",
        // intro: '',
        // sex: '',
        // checkbox: '',
        // radio: '',
        // switchVal: false,

        /*返回的数据*/
        categoryName: "",
        channelName: "",
        categoryPic: [],
        createTime: "",

        /*上传的数据*/
        categoryId: 0,
        channelId: 0,
        amount: 0,
        remark: ""
      },
      checkboxList1: [
        {
          name: '苹果',
          checked: false,
          disabled: false
        },
        {
          name: '雪梨',
          checked: false,
          disabled: false
        },
        {
          name: '柠檬',
          checked: false,
          disabled: false
        }
      ],
      radioList1: [
        {
          name: '鲜甜',
          disabled: false
        },
        {
          name: '麻辣',
          disabled: false
        }
      ],
      select1: {
        show: false,
        current: {},
        list: [{
          value: 1,
          label: '男'
        },
          {
            value: 2,
            label: '女'
          }
        ],
      },
      calendar1: {
        show: false,
      },
      rules: {
        amount: [
          {required: true, message: '请输入消费金额', trigger: ['change', 'blur']}
        ],
        birthday: [
          {required: true, message: '请选择日历', trigger: ['change', 'blur']}
        ],
        channel: [
          {required: true, message: '请选择账户', trigger: ['change', 'blur']}
        ],
        checkbox: [
          {type: "array", required: true, message: '请选择水果', trigger: ['blur']}
        ]
      },
      formId: {}
    };
  },
  computed: {
    chunkedItems() {
      const chunkSize = 10;
      const chunked = [];
      for (let i = 0; i < this.list.length; i += chunkSize) {
        chunked.push(this.list.slice(i, i + chunkSize));
      }
      return chunked;
    }
  },
  onLoad(e) {
    console.log(e)
    this.formId = e
    this.getData()
  },
  onReady() {
    // this.$refs.form1.setRules(this.rules);
  },
  onShow() {
    //  this.$refs.form1.setRules(this.rules);
  },
  methods: {
    getData() {
      const _this = this;
      // 消费用途
      categoryListApi().then(res => {
        if (res.code === 200) {
          _this.list = res.data;
        } else {
        }
      }).catch(err => {
        console.log(err)
      })

      console.log(this.formId.id !== '-1')
      if (this.formId.id !== '-1') {
        // 消费历史
        outlaySelectByIdApi(_this.formId).then(res => {
          if (res.code === 200) {
            Object.assign(_this.form, res.data[0])
          } else {
          }
        }).catch(err => {
          console.log(err)
        })
      }


      // 支付方式
      channelListApi().then(res => {
        console.log(res)
        if (res.code === 200) {
          _this.listChannel = res.data.map(item => ({
            label: item.channelName,
            value: item.id
          }));
        } else {

        }
      }).catch(err => {
        console.log(err)
      })

    },
    onSelectChannel(arr) {
      console.log(arr)
      let current = arr[0];
      this.form.channelId = current.value;
      this.form.channelName = current.label;
    },
    change(e) {
      this.current = e.detail.current;

    }, click(e) {
      console.log(e)
      this.form.categoryId = e
    },
    submit() {
      const _this = this;
      this.form.categoryPic = null
      if (this.formId.id !== '-1') {
        outlayUpdateApi(this.form).then(res => {
          console.log(res)
          if (res.code === 200) {
            console.log(res)
          } else {

          }
        }).catch(err => {
          console.log(err)
        })
      }else {
        outlayAddApi(this.form).then(res => {
          console.log(res)
          if (res.code === 200) {
            console.log(res)
          } else {

          }
        }).catch(err => {
          console.log(err)
        })
      }


      // this.$refs.form1.validate((valid) => {
      //   console.log(valid);
      //   if (valid) {
      //     uni.showToast({
      //       icon: "none",
      //       title: "表单验证通过"
      //     })
      //   }
      // })
    },
    onCalendar1(e) {
      this.form.birthday = e.result;
    }
  }
};
</script>
<style scoped lang="scss">

.cate-item {
  &.selectCategory {
    //background-color: #dadada !important;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    //-ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    //filter: gray;
  }
}

.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: $u-type-info;
}

.swiper {
  height: 280rpx;
}

.indicator-dots {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator-dots-item {
  background-color: $u-tips-color;
  height: 6px;
  width: 6px;
  border-radius: 10px;
  margin: 0 3px;
}

.indicator-dots-active {
  background-color: $u-type-primary;
}
</style>